<template>
  <a-card class='left-area' :loading="cardLoading" :bordered="false">
    <a-spin :spinning="loading">
      <!-- <a-input-search @search="handleSearch" style="width:100%;margin-top: 10px" placeholder="输入机构名称查询..." enterButton /> -->

      <a-tree
        showLine
        checkStrictly
        :expandedKeys.sync="expandedKeys"
        :selectedKeys="selectedKeys"
        :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
        :treeData="treeDataSource"
        :autoExpandParent="true"
        @select="handleTreeSelect"
      >

      <template slot="custom" slot-scope="item">
          <span>{{ item.title }}（{{item.personReadCount}}/{{item.personCount}}）</span>
      </template>
      </a-tree>
    </a-spin>
  </a-card>
</template>

<script>
  import { getAction } from '@/api/manage'

  export default {
    name: 'AddressListLeft',
    props: ['value','publishId','formType'],
    data() {
      return {
        cardLoading: true,
        loading: false,
        treeDataSource: [],
        selectedKeys: [],
        expandedKeys: [],
        queryTreeAndReadCountList:'/api/erpmng/sys/sysDepart/queryTreeAndReadCountList',
      }
    },
    // created() {
    //   this.queryTreeData()
    // },
    methods: {

      queryTreeData(keyword) {
        // publishType:  notice(公告)    collect(意见征集)
        this.commonRequestThen(getAction(this.queryTreeAndReadCountList,{
          publishType: this.formType =='notice'? "notice":'collect',
          publishId: this.publishId,
          keyword
        }))
      },

      handleSearch(value) {
        if (value) {
          // this.commonRequestThen(searchByRealKeywords({ keyWord: value }))
        } else {
          this.queryTreeData()
        }
      },
      
      /**
       * 递归遍历
       */
      recursionTree(tree) {
          if (tree != null) {
              if (tree.children&&tree.children.length > 0) {
                  tree.scopedSlots =  { title: 'custom' }
                  tree.children.forEach( c => {
                      this.recursionTree(c);
                  })
              } else {
                  tree.scopedSlots =  { title: 'custom' }
              }
          }
      },

      handleTreeSelect(selectedKeys, event) {
        if (selectedKeys.length > 0 && this.selectedKeys[0] !== selectedKeys[0]) {
          this.selectedKeys = [selectedKeys[0]]
          let orgCode = event.node.dataRef.orgCode
          this.emitInput(orgCode)
        }
      },

      emitInput(orgCode) {
        this.$emit('input', orgCode)
      },

      commonRequestThen(promise) {
        this.loading = true
        promise.then(res => {
          if (res.success) {
            this.treeDataSource = res.result

            for (let it of this.treeDataSource) {
              this.recursionTree(it)
            }

            // update-begin- --- author:wangshuai ------ date:20200102 ---- for:去除默认选中第一条数据、默认展开所有第一级
            // 默认选中第一条数据、默认展开所有第一级
            if (res.result.length > 0) {
              this.expandedKeys = []
              res.result.forEach((item, index) => {
                if (index === 0) {
                  this.selectedKeys = [item.id]
                  this.emitInput(item.orgCode)
                }
                this.expandedKeys.push(item.id)
              })
            }
           // update-end- --- author:wangshuai ------ date:20200102 ---- for:去除默认选中第一条数据、默认展开所有第一级
          } else {
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
      },

    }
  }
</script>

<style scoped>
.left-area{
  height: 55vh;
  overflow: auto;
}
</style>